/<template>
  <div class="left">
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="changeIndex(index)"
        :class="{ on: index == activeIndex }"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // 接受来自父亲的数据， props里面的数据不可以直接修改
  props: {
    list: Array,
    activeIndex: Number,
  },
  methods: {
    changeIndex(index) {
      // 子传父，修改父亲的下标
      // 在事件里面，触发给父亲打电话的操作 $emit
      console.log(index);
      // 参数一： 拨打的电话号码
      // 参数二： 要传递的数据
      this.bus.$emit("changeParent", index);
    },
  },
};
</script>

<style>
.left li {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border: 1px solid #ccc;
}
.left li.on {
  background: #f00;
}
</style>